<template>
  <van-nav-bar
  fixed
  placeholder
  :title="$t('message.setting')"
  />
  <main>
    <van-cell-group>
      <van-field
        v-model="commonStore.language"
        is-link
        readonly
        :label="$t('message.language')"
        @click="showLanguagePicker = true"
      />
    </van-cell-group>
  </main>
  <van-popup v-model:show="showLanguagePicker" round position="bottom">
    <van-picker
      :title="$t('message.language')"
      :modelValue="[commonStore.language]"
      :columns="Object.keys(Language).map((item)=> {return {text:Language[item], value:Language[item]}})"
      @cancel="showLanguagePicker = false"
      @confirm="onLanguagePickerConfirm"
    />
  </van-popup>
</template>
  
<script setup lang="ts">
    import { ref } from 'vue'
    import { useCommonStore , Language} from '../stores/common'
    import {useI18n} from 'vue-i18n'

    const {locale} = useI18n();

    const commonStore= useCommonStore();
    const showLanguagePicker = ref(false);

    function onLanguagePickerConfirm({ selectedOptions }){
        showLanguagePicker.value = false;
        commonStore.setLanguage(selectedOptions[0].value, locale);
    }
  </script>
  
  <style scoped>
  </style>
  